<template>
  <div class="boxs-1">
    <div class="box-11">
      <div class="boxs-11">{{ dateData }}</div>
      <div class="boxs-13">{{ weekdayData }}</div>
    </div>
    <div class="box-12">{{ timeData }}</div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入中文语言包
import weekday from 'dayjs/plugin/weekday' // 导入星期插件

dayjs.locale('zh-cn') // 使用中文语言包
dayjs.extend(weekday) // 使用星期插件

let timeData = ref('') // 用于存放时分秒
let dateData = ref('') // 用于存放年月日
let weekdayData = ref('') // 用于存放星期几

let intervalId: number | null = null
onMounted(() => {
  // 先立即更新时间
  updateDateTime()
  // 然后每秒更新时间
  intervalId = setInterval(updateDateTime, 1000)
})
// 更新时间的函数
function updateDateTime() {
  timeData.value = dayjs().format('HH:mm:ss')
  dateData.value = dayjs().format('YYYY-MM-DD')
  weekdayData.value = dayjs().format('dddd')
}
onBeforeUnmount(() => {
  if (intervalId) clearInterval(intervalId)
})
</script>

<style lang="scss" scoped>
.boxs-1 {
  /* background-color: red; */
  width: 233px;
  height: 60px;
  /* height: 20px; */
  /* background-color: red; */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .box-11 {
    width: 75px;
    height: 30px;
    /* background-color: rgb(39, 145, 15); */
    .boxs-11 {
      width: 75px;
      box-sizing: border-box;
      height: 14px;
      font-size: 12px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 14px;
      text-align: right;
      margin-bottom: 2px;
    }
    .boxs-13 {
      width: 75px;
      height: 14px;
      font-size: 14px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 14px;
      text-align: right;
    }
  }
  .box-12 {
    width: 154px;
    height: 40px;
    font-size: 40px;
    font-family: DIN-Medium, DIN;
    font-weight: 500;
    color: #ffffff;
    line-height: 40px;
  }
}
</style>
